<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>不同时间作品数</title>

    <script src="echarts.js"></script>
    <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
</head>

<body>
<!-- 为 ECharts 准备一个具备大小的 DOM 容器 -->
<div id="lineChart" style="width: 600px; height: 400px;"></div>

<script>
    // 创建 XMLHttpRequest 对象用于读取 CSV 文件
    const xhr = new XMLHttpRequest();
    xhr.open('GET', '../output/mengBatch2.csv/part-00000-1fa49a1e-71ed-489b-ba4f-e96137260b4d-c000.csv', true);
    xhr.onload = function () {
        if (this.status === 200) {
            const csvData = this.responseText;
            // 解析 CSV 数据，处理可能的空格
            const rows = csvData.split('\n').map(row => row.split(',').map(item => item.trim()));
            const headers = rows[0];
            // 过滤有效数据行（确保4列完整且转化率为有效数字）
            const dataRows = rows.slice(1).filter(row => row.length === 4 && !isNaN(parseFloat(row[3])));

            // 处理数据，提取各市场及对应转化率
            const marketData = [];
            const conversionRates = [];
            const totalUsers = []; // 用于气泡大小

            dataRows.forEach(row => {
                marketData.push(row[0]); // 市场级别
                // 转化率保留两位小数（转为百分比展示）
                conversionRates.push(parseFloat(row[3]).toFixed(2));
                // 总用户数用于控制气泡大小（做归一化处理避免过大）
                totalUsers.push(parseInt(row[1]) || 0);
            });

            // 初始化 ECharts 实例
            const myChart = echarts.init(document.getElementById('lineChart'));

            // 计算最大用户数用于气泡大小归一化
            const maxUsers = Math.max(...totalUsers);

            // 指定图表的配置项和数据
            const option = {
                title: {
                    text: '各市场级别主页浏览转化率差异',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function(params) {
                        return `${params.name}<br/>` +
                            `总用户数: ${totalUsers[params.dataIndex]}<br/>` +
                            `主页浏览用户: ${dataRows[params.dataIndex][2]}<br/>` +
                            `转化率: ${params.value}%`;
                    }
                },
                xAxis: {
                    type: 'category',
                    data: marketData,
                    name: '市场级别', // 市场级别
                    axisLabel: {
                        rotate: 30 // 防止市场名称过长重叠
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '主页转化率', // 主页转化率
                    axisLabel: {
                        formatter: '{value}%' // 显示百分比符号
                    },
                    min: 0, // 转化率从0开始
                    max: function(value) {
                        // 最大值设为实际最大值的1.2倍，留有余地
                        return Math.ceil(value.max * 1.2);
                    }
                },
                series: [
                    {
                        // 转化率折线
                        type: 'line',
                        name: '转化率',
                        data: conversionRates,
                        symbol: 'circle',
                        symbolSize: 8,
                        lineStyle: {
                            width: 2
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{c}%'
                        }
                    },
                    {
                        // 气泡图展示用户规模
                        type: 'scatter',
                        name: '用户规模',
                        data: conversionRates.map((rate, index) => ({
                            value: [marketData[index], rate],
                            symbolSize: Math.sqrt(totalUsers[index] / maxUsers) * 50 // 气泡大小基于总用户数
                        })),
                        itemStyle: {
                            color: 'rgba(255, 165, 0, 0.6)'
                        }
                    }
                ]
            };

            // 使用配置项显示图表
            myChart.setOption(option);

            // 响应窗口大小变化
            window.addEventListener('resize', () => {
                myChart.resize();
            });
        }
    };
    xhr.send();
</script>
</body>
</html>